<template>
    <div style="width: 100%;height: 14vh;background-color: white;">
        <div class="register-head">
            <img src="/imgs/homepage1.jpg" alt="homepage" width="65px" height="65px">
            <div class="register-besides">
                <p style="font-size: 22px;font-weight: bold;">聚睿吉利</p>
                <p style="font-weight: bold; font-size: 12px;">新质智能材价平台</p>
            </div>
        </div>
        <div class="register-return">
            <button @click="hiddle" style="outline: none;border: 0;background-color: white;">返回首页</button>
        </div>
    </div>
    <div style="width: 100%;height: 76vh;">
        <div class="login-middle">
            <div class="title"><p style="font-size: 20px;">用户注册</p></div>
            <div class="login">
                <div style="width: 160px;height: 50px;line-height: 50px;position: absolute;top: 0;right: 0">
                    已有账号？
                    <router-link to="/login" class="tran">立即登录</router-link>
                </div>
                <a-form
                    :model="formState"
                    name="basic"
                    :label-col="{ span: 5 }"
                    :wrapper-col="{ span: 14 }"
                    autocomplete="off"
                    @finish="onFinish"
                    @finishFailed="onFinishFailed"
                    style="width: 60%;margin: auto;margin-top: 50px"
                >
                
                    <a-form-item
                        label="账号"
                        name="username"
                        :rules="[{ required: true, message: '' }]"
                    >
                        <a-input class="input" placeholder="设置用户名称" v-model:value="formState.username"/>
                    </a-form-item>
                    <a-form-item
                        label="密码"
                        name="password"
                        
                        :rules="[{ required: true, message: '' }]"
                    >
                        <a-input class="input" placeholder="请设置6-20位登录密码" v-model:value="formState.password" />
                    </a-form-item>
                    <a-form-item
                        label="确认密码"
                        name="doublepassword"
                        
                        :rules="[{ required: true, message: '' }]"
                    >
                        <a-input class="input" placeholder="再次输入密码" v-model:value="formState.doublepassword" />
                    </a-form-item>
                    <a-form-item
                        label="手机号码"
                        name="telephone"
                        
                        :rules="[{ required: true, message: '' }]"
                    >
                        <a-input class="input" placeholder="请输入手机号码" v-model:value="formState.telephone" />
                    </a-form-item>
                    <a-form-item
                        label="验证码"
                        name="code"
                        
                        :rules="[{ required: true, message: '' }]"
                    >
                        <a-input class="input" placeholder="请输短信验证码" v-model:value="formState.code" />
                        <button @click="requireCode" class="codeq">获取验证码</button>
                    </a-form-item>
                    <a-form-item 
                        name="remember"
                        valuePropName="checked"
                        :wrapper-col="{ offset: 6, span: 16 }"
                    >
                        <a-radio style="font-size: 12px;color: rgb(128,128,128);">勾选同意<span style="color: orange;">《用户服务协议》</span></a-radio>
                    </a-form-item>
                    <a-form-item :wrapper-col="{ offset: 4, span: 16 }">
                        <a-button @click="handleRegister" type="primary" html-type="submit" style="width: 400px;background-color: orange;border-radius: 0;height: 35px;">注册</a-button>
                    </a-form-item>
                
                </a-form>
            </div>
        </div>
    </div>
    <div style="width: 100%;height: 10vh;text-align: center;background-color: white;">
      <p style="font-size: 13px;margin-top: 22px;margin-bottom: 5px;">Copyright @www.AxureUX.com, All Rights Reserved</p>
      <p style="font-size: 13px;margin: 0;">专业的交互原型素材原创分享平台</p>
    </div>
</template>

<script setup>
    import { useRouter } from "vue-router"
    import { reactive } from 'vue'

    const router=new useRouter()

    const hiddle= () => {
        router.push('/')
    }
    const formState = reactive({

    })
    const onFinish = values => {
        console.log('Success:', values);
    }
    const onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
    }
    const requireCode=()=>{
        formState.code=123456
    }
    const handleRegister=()=>{
        console.log(formState)
    }
</script>

<style>
.register-head{
    display: flex;
      width: 65%;
      height: 70px;
      margin: auto;
      margin-top: 20px;
    }
    .register-head-logo{
      width: 165px;
      height: 100%;
    }
    .register-besides{
      float: right;
      padding-top: 4px;
      color: orange;
    }
    .register-besides p{
      margin: 0;
    }
    .register-return{
        position: absolute;
        top: 42px;
        right: 18%;
    }
    .login-middle{
        width: 65%;
        height: 100%;
        margin: auto;
    }
    .title{
        width: 100%;
        height: 8vh;
        line-height: 8vh;
        padding-left: 10px;
    }
    .login{
        position: relative;
        width: 100%;
        height: 60vh;
        margin-top: 10px;
        border-radius: 10px;
        overflow: hidden;
        background-color: white;
    }
    .tran{
        color: orange;
    }
    .tran:hover{
        background-color: white;
    }
    .ivu-form-item{
        margin-bottom: 10px;
    }
    .codeq{
        position: absolute;
        top: 4px;
        right: 10px;
        font-size: 12px;
        background-color: white;
        color: orange;
        outline: none;
        border: 0;
    }
</style>